<template>
  <main style="background-color:antiquewhite">
    <div style="height: 50px;width:100%;display: flex;flex-direction: row;justify-content: center; display: flex;
      align-items: center;ju">
        <input style="height: 40px;width: 500px;border-radius: 20px;" type="text" placeholder="你好"/>
        <button style="height: 35px; width: 60px; background-color: aqua;border-radius: 20px;;margin-left: -65px;">搜索</button>
    </div>
     <div>
        <form>
          <div style="height: 150px;width:150px;">
              <img src="../assets/shangpian/shangpian1.jpg"/>
          </div>
          <div style="height: 150px;width:230px;display: flex;flex-direction: column;justify-content: space-around;">
             <a>可定制草稿纸大学生考研专用护眼草纸演算高中生演草纸打稿纸名校清华大学空白白纸本加厚小学生用草稿本可撕</a>
             <span style="color: #ff5000;font-size: 18px;">15元</span>
             <div style="margin-top: 10px;">
              <!---<button>-</button>
              <span>1</span>-->
              <button>+</button>
            </div>
          </div>
        </form>
        <form>
          <div style="height: 150px;width:150px;">
              <img src="../assets/shangpian/shangpian1.jpg"/>
          </div>
          <div style="height: 150px;width:230px;display: flex;flex-direction: column;justify-content: space-around;">
             <a>可定制草稿纸大学生考研专用护眼草纸演算高中生演草纸打稿纸名校清华大学空白白纸本加厚小学生用草稿本可撕</a>
             <span style="color: #ff5000;font-size: 18px;">15元</span>
             <div style="margin-top: 10px;">
              <!---<button>-</button>
              <span>1</span>-->
              <button>+</button>
            </div>
          </div>
        </form>
        <form>
          <div style="height: 150px;width:150px;">
              <img src="../assets/shangpian/shangpian1.jpg"/>
          </div>
          <div style="height: 150px;width:230px;display: flex;flex-direction: column;justify-content: space-around;">
             <a>可定制草稿纸大学生考研专用护眼草纸演算高中生演草纸打稿纸名校清华大学空白白纸本加厚小学生用草稿本可撕</a>
             <span style="color: #ff5000;font-size: 18px;">15元</span>
             <div style="margin-top: 10px;">
              <!---<button>-</button>
              <span>1</span>-->
              <button>+</button>
            </div>
          </div>
        </form>
     </div>
     <div>

     </div>
     <div>
      
    </div>
    <div>
      
    </div>
  </main>
</template>

<script>
 export default {
name:'one'
 }
</script>

<style scoped lang="less">
main{
  display: flex;
  flex-direction: column;
 justify-content: space-around;
 width: 100%;
 height: 100vh;
 div{
      width: 100%;
      height: 170px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    form{
      background-color: #f7f9fa;
      height: 170px;
      width: 400px;
      border-radius: 12px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center; 
      
    }

  }
}
img{
  width: 150px;
  height: 150px;
  border-radius: 10px
}
button{
  width:50px ;
  height:30px;
}

</style>